<template>
  <div class="header-wrapper" :class="{ showBorderOnScroll: navBarOnScroll }">
    <header class="header">
      <nav class="nav">
        <div class="symbol">
          <nuxt-link title="这个图标像个鬼一样👹" to="/">
            <img
              class="logo"
              width="30"
              height="30"
              src="/wissbell.svg"
              alt="symbol of wissbell."
              title="have a nice day! 😀 "
            />

            <span class="title">WISSBELL</span>
          </nuxt-link>
        </div>
        <div class="menu hide-on-tablet">
          <nuxt-link :to="localePath('/')" class="link" title="我的小飞机场🛫">
            AirPort
          </nuxt-link>
          <nuxt-link
            class="link"
            :to="localePath('/posts')"
            title="写代码多少要懂点魔法👾"
          >
            Blogs
          </nuxt-link>
          <nuxt-link
            class="link"
            :to="localePath('/deadline')"
            title="我就剩两张牌啦🎴"
          >
            DeadLine
          </nuxt-link>
        </div>
        <div class="action hide-on-tablet">
          <div
            class="button"
            title="颠倒昼夜🌓"
            type="small"
            @click.prevent="switchTheme"
          >
            <i class="icon" :class="themeSwitchIcon"></i>
          </div>
          <div
            href="https://github.com/Coke-Code"
            class="button"
            target="_blank"
            title="因特纳雄奈尔就一定要实现🎯"
            type="small"
          >
            <i class="icon sight-icon-github"></i>
          </div>
          <nuxt-link
            v-for="locale in availableLocales"
            :key="locale.code"
            class="button"
            title="走向国际🤝"
            :to="switchLocalePath(locale.code)"
            >{{ locale.name }}</nuxt-link
          >
        </div>
        <div class="action">
          <button class="mobile-menu" aria-label="menu" @click="showMobileMenu">
            <div
              class="menu-toggle"
              :class="{ expanded: mobileMenuExpanded }"
            ></div>
          </button>
        </div>
      </nav>
      <nav v-show="mobileMenuExpanded" class="nav--mobile">
        <div class="menu--mobile" @click="handleMobileLinkClick">
          <nuxt-link :to="localePath('/')" class="link" title="我的小飞机场🛫">
            AirPort
          </nuxt-link>
          <nuxt-link
            class="link"
            :to="localePath('/posts')"
            title="写代码多少要懂点魔法👾"
          >
            Blogs
          </nuxt-link>
          <nuxt-link
            class="link"
            :to="localePath('/deadline')"
            title="我就剩两张牌啦🎴"
          >
            DeadLine
          </nuxt-link>
        </div>
        <div class="action--mobile">
          <div
            class="button"
            title="颠倒昼夜🌓"
            type="small"
            @click.prevent="switchTheme"
          >
            <i class="icon" :class="themeSwitchIcon"></i>
          </div>
          <div
            href="https://github.com/Coke-Code"
            class="button"
            target="_blank"
            title="因特纳雄奈尔就一定要实现🎯"
            type="small"
          >
            <i class="icon sight-icon-github"></i>
          </div>
          <nuxt-link
            v-for="locale in availableLocales"
            :key="locale.code"
            class="button"
            title="走向国际🤝"
            :to="switchLocalePath(locale.code)"
            >{{ locale.name }}</nuxt-link
          >
        </div>
        <div class="spacer" style="margin-top: (--space)"></div>
        <div ref="lottie" class="lottie"></div>
        <div class="header-slogan">
          🎯
          <p>我们的目标是星辰大海</p>
          🚀
        </div>
      </nav>
    </header>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import lottie from 'lottie-web'
import rocket from '@/assets/animate/rocket.json'
const themeList = ['normal', 'light', 'dark']
export default {
  data() {
    return {
      mobileMenuExpanded: false,
      navBarOnScroll: false,
    }
  },
  computed: {
    availableLocales() {
      return this.$i18n.locales.filter((i) => i.code !== this.$i18n.locale)
    },
    themeSwitchIcon() {
      const icons = ['sight-icon-monitor', 'sight-icon-sun', 'sight-icon-moon']
      const index = themeList.findIndex((v) => v === this.currentMode)
      return icons[index]
    },
    currentMode() {
      return this.$store.state.currentThemeMode
    },
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('scroll', () => {
        this.navBarOnScroll = !!window.pageYOffset
      })
      const localMode = localStorage.getItem('theme-mode')
      const currentMode = localMode ?? 'normal'
      this.$store.commit('SWITCH_MODE', currentMode)
    })
    this.animateLottie()
  },
  methods: {
    ...mapMutations({
      switchMode: 'SWITCH_MODE',
      mobileMenuExpand: 'SHOW_MOBILE_MENU',
    }),
    switchTheme() {
      let index = themeList.findIndex((v) => v === this.currentMode)
      let mode = themeList[++index]
      if (index > 2) {
        mode = themeList[0]
      }
      this.switchMode(mode)
    },
    showMobileMenu() {
      this.mobileMenuExpanded = !this.mobileMenuExpanded
      this.mobileMenuExpand()
    },
    mounted() {
      this.animateLottie()
    },

    lottieReady() {
      this.lottieIsReady = true
    },
    animateLottie() {
      this.initLottie(rocket)
    },
    initLottie(data, loop = true) {
      const lottieEl = this.$refs.lottie
      this.lottie = lottie.loadAnimation({
        container: lottieEl,
        renderer: 'svg',
        loop,
        autoplay: true,
        animationData: data,
      })
    },
    handleMobileLinkClick(e) {
      if (e.target.nodeName === 'A') {
        this.showMobileMenu()
      }
    },
  },
}
</script>
<style scoped>
.logo {
  width: 30px;
  height: 30px;
}

.switch-lang {
  border: 1px dashed var(--foreground);
  color: var(--foreground);
  padding: 0 var(--space-2x);
  margin: 0 var(--space);
}
.lottie {
  height: 135px;
  background: #fff;
  padding-bottom: 20px;
  border-radius: 10px;
  margin: 0 10px;
}
@media (prefers-color-scheme: dark) {
  .lottie {
    filter: invert(1);
  }
}
[theme='dark'] .lottie {
  filter: invert(1)
}
.header-slogan {
  font-weight: bold;
  width: 100%;
  height: 135px;
  position: relative;
  left: 0;
  top: -135px;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  flex-shrink: 0;
}
.header-slogan p {
  padding: 0 var(--space);
  font-size: 0.75rem;
}
</style>
